<template>
  <div
    class="tw-h-full tw-w-full"
    :style="{
      backgroundColor: node.model.backgroundColor,
      borderWidth: node.model.borderWidth + 'px',
      borderColor: node.model.borderColor,
      borderRadius: node.model.borderRadius + 'px',
    }"
  >
    <TeleportForm :node="node">
      <template #default="{ model }">
        <div class="q-mt-md">
          <label>填充颜色</label>
          <q-input v-model="model.backgroundColor">
            <q-popup-proxy>
              <q-color
                style="min-width: 250px"
                v-model="model.backgroundColor"
                format-model="hexa"
              />
            </q-popup-proxy>
          </q-input>
        </div>
        <q-input class="col" v-model="model.borderWidth" type="number" label="边框大小" />
        <q-input class="col" v-model="model.borderRadius" type="number" label="圆角大小" />
        <div class="q-mt-md">
          <label>边框颜色</label>
          <q-input v-model="model.borderColor">
            <q-popup-proxy>
              <q-color style="min-width: 250px" v-model="model.borderColor" format-model="hexa" />
            </q-popup-proxy>
          </q-input>
        </div>
      </template>
    </TeleportForm>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import defaultProps from 'src/pages/BiographicalNotes/common/defaultProps';
import TeleportForm from '../../TeleportForm/TeleportForm.vue';
export default defineComponent({
  name: 'RectangleComponent',
  props: defaultProps,
  components: {
    TeleportForm,
  },
  setup() {
    return {};
  },
});
</script>
